<template>
  <div style="height: 1000px;">
    <div class="midall" >
      <div class="midleft">
      <el-breadcrumb separator-class="el-icon-arrow-right" style="margin: 30px 0px">
        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>{{newsDetail.newsCategoryName}}</el-breadcrumb-item>
        <el-breadcrumb-item>{{newsDetail.title }}</el-breadcrumb-item>
      </el-breadcrumb>
      <h2 class="title">{{newsDetail.title }}</h2>
        <p style="text-align: center">发布人:{{newsDetail.author}}</p>
        <p class="leftP">{{newsDetail.content}}</p>
        <div class="pic" >
<!--        <img src="../../public/img.png" alt="" style="width: 500px;">-->
        </div>

        <el-button-group>
          <el-button type="primary" icon="el-icon-arrow-left" @click="back()">上一页</el-button>
        </el-button-group>
        <el-button  @click="openConfirm" style="margin-left: 200px;position: relative;top: 3px;">
          <i class="fa" ></i>
          {{ (favorite ? '已收藏' : '收藏')+"："+(newsDetail.collectionCount)}}
        </el-button>
        <el-button-group style="float: right">
          <el-button type="primary" @click="go()">下一页<i class="el-icon-arrow-right el-icon--right" ></i></el-button>
        </el-button-group>
      </div>

      <div
          style="width: 280px;height:500px;border: 0px red solid;float: right;margin-top: 100px">
        <p style="margin: 30px">新闻列表</p>
<!--        <img src="http://about.uoko.com/uploadfile/2023/0419/thumb_240_120_20230419111651926.png" alt="" width="280px">-->
        <div v-for="item in newsList" style="line-height: 30px;margin-left: 50px">
<!--          <template slot-scope="scope">-->
            <a href=""><p style="text-align: left;color: black;white-space: nowrap;text-overflow: ellipsis !important;overflow: hidden;" @click="toList(item.id)">{{item.title}}</p></a>
<!--          </template>-->
        </div>
      </div>

    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      newsDetail:{},
      newsList:{},
      favorite: 'false'
    };
  },
  methods: {
    openConfirm() {

      let loginInfo = localStorage.getItem('localUserJwt');

      if (!loginInfo) {
        this.$alert("请先登录！", '错误', {
          confirmButtonText: '确定',
          callback: action => {
            this.$router.push('/login')
          }
        });
        return;
      }

      this.$confirm('此操作将'+(this.favorite ? '取消收藏' : '收藏')+'该新闻，是否继续？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.toggleFavorite();
      }).catch(() => {
      });
    },
    toggleFavorite() {

      if (this.favorite == false) {
        let url = 'http://localhost:9200/user/add-new-news-collection?newsId=' + this.newsDetail.id;
        this.axios.post(url).then((response) => {
          let jsonResult = response.data;

          if (jsonResult.state == 20000) {
            this.$message({
              message: '收藏成功！',
              type: 'success'
            });
            // this.loadUserCollectionInfo();
            this.loadNewsDetail();
            this.favorite = true;
          } else {
            this.$alert(jsonResult.message, '错误', {
              confirmButtonText: '确定',
              callback: action => {
                // this.loadUserCollectionInfo();
                this.loadNewsDetail();
                this.favorite = false;
              }
            });
          }
        });
      }
      if (this.favorite == true) {
        let url = 'http://localhost:9200/user/delete-news-collection?newsDetailId=' + this.newsDetail.id;
        this.axios.post(url).then((response) => {
          let jsonResult = response.data;

          if (jsonResult.state == 20000) {
            this.$message({
              message: '取消收藏成功！',
              type: 'success'
            });
            // this.loadUserCollectionInfo();
            this.loadNewsDetail();
            this.favorite = false;
          } else {
            this.$alert(jsonResult.message, '错误', {
              confirmButtonText: '确定',
              callback: action => {
                // this.loadUserCollectionInfo();
                this.loadNewsDetail();
                this.favorite = true;

              }
            });
          }
        });
      }
    },
    loadNewsDetail() {
      let newsDetailId = this.$router.currentRoute.query.newsDetailId
      let url = 'http://localhost:9200/newsDetail/standard?id='+newsDetailId;
      this.axios.get(url).then((response) => {
        let jsonResult = response.data;
        if (jsonResult.state == 20000) {
          this.newsDetail = jsonResult.data;
          console.log(this.newsDetail)
        } else {
          this.$message.error(jsonResult.message);
        }
      })
    },

    loadNewsList() {
      let page = this.$router.currentRoute.query.page;
      if (!page) {
        page = 1;
      }
      let url = 'http://localhost:9200/newsDetail/list?page=' + page;
      this.axios.get(url).then((response) => {
        let jsonResult = response.data;
        if (jsonResult.state == 20000) {
          this.newsList = jsonResult.data.list;
        } else {
          this.$message.error(jsonResult.message);
        }
      })
    },
    back(){
      let newsDetailId = this.$router.currentRoute.query.newsDetailId
      if(newsDetailId>=2){
        let url = 'http://localhost:9200/newsDetail/standard?id='+(newsDetailId-1);
        console.log('url = ' + url);
        this.axios.get(url).then((response) => {
          let jsonResult = response.data;
          if (jsonResult.state == 20000) {
            this.newsDetail = jsonResult.data;
            this.$router.replace("/newsDetail?newsDetailId="+(newsDetailId-1));
            this.loadUserCollectionInfo();
          } else {
            this.$message.error(jsonResult.message);
          }
        })
      }else {
        return;
      }
    },
    go(){
        let newsDetailId = this.$router.currentRoute.query.newsDetailId
        let url = 'http://localhost:9200/newsDetail/standard?id='+(parseInt(newsDetailId)+1);
        console.log('url = ' + url);
        this.axios.get(url).then((response) => {
          let jsonResult = response.data;
          if (jsonResult.state == 20000) {
            this.newsDetail = jsonResult.data;
            this.$router.push("/newsDetail?newsDetailId="+(parseInt(newsDetailId)+1))
            this.loadUserCollectionInfo();
          } else {
            this.$message.error(jsonResult.message);
          }
        })

    },
    toList(id){
      this.$router.push('/newsDetail?newsDetailId='+id)
    },
    loadUserCollectionInfo() {

      let loginInfo = localStorage.getItem('localUserJwt');

      if (!loginInfo) {
        this.favorite = false;
        return;
      }

      let newsDetailId = this.$router.currentRoute.query.newsDetailId;
      let url = 'http://localhost:9200/user/newsCollectionInfo?newsId=' + newsDetailId;
      console.log(url);

      this.axios.get(url).then((response) => {
        let jsonResult = response.data;

        if (jsonResult.state == 20000) {
          this.favorite = jsonResult.data;
        } else {
          this.$alert(jsonResult.message, '错误', {
            confirmButtonText: '确定',
            callback: action => {
            }
          });
        }
      });
    }

  },
  mounted() {
    this.loadNewsDetail()
    this.loadNewsList()
    this.loadUserCollectionInfo()
  }
}
</script>
<style>
body {
  font-size: 15px;
}
.midall{
  margin: 0 auto;width: 980px;height:900px;border: 0px red solid;
}
.midleft{
  width: 680px;height:900px;border: 0px green solid;text-align: left;display: inline-block;float: left;
}
.title{
  text-align: center;padding-bottom: 10px;
}
.leftP{
  text-indent: 2em;margin-top: 30px; line-height: 30px;font-size: 20px;
}
.pic{
  text-align: center;padding:40px;overflow: hidden;
}


</style>

